{% extends "../base_public.html" %}

{% block content %}
<div class="container-fluid" style="width:90%;padding-left: 180px;">
<form method="GET" action="/ansible/opt_task/">{% csrf_token %}
  
<div class="row">
  <div class="col-sm-6">
  <div class="form-group">
      <label for="exampleInputEmail1">组列表</label>
      <!-- <input type="text" class="form-control" name="groupName" placeholder="组列表"> -->
      <select name="groupName" class="form-control">
          <option value="None">选择一个组</option>
          {% for g in groups %}
          <option>
              {{ g.nickName|default:g.groupName }}&nbsp;<------>&nbsp;{{ g.groupName }}
            </option>
          {% endfor %}
      </select>
    </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label for="exampleInputPassword1">任务组</label>
            <select class="form-control" name="module">
                <option value="None">选择一个模块</option>
              {% for m,n in ansible_modules.items %}
              <option value="{{m}}">
                {{ n.describe|default:m }}
              </option>
              {% endfor %}
            </select>
          </div>
</div>
</div>
  <div class="form-group">
    <label for="exampleInputPassword1">参数</label>
    <textarea type="text" class="form-control" name="vars" placeholder="参数"rows=9></textarea>
  </div>
  
  <button type="submit" class="btn btn-default">提交</button>
</form>
</div>

<script type="text/javascript">
  $("select[name='module']").change(function(){
    module_name = this.selectedOptions[0].value
    $.ajax({
      url: "/ansible/get_modules/"+module_name,
      success: function(msg){
        data = {}
        v = ""
        $.each(msg.parameter, function(a,b){
          data[b] = ""
          v += '"'+b+'": "",\n'
        })
        console.log(data)
        $('textarea')[0].value = v
        $('pre')[0].innerHTML = syntaxHighlight(data)
      }
    })
  });
  
  </script>
{% endblock %}